<template>
	<ul class="botton">
		<li>
			<router-link to="/">
				<img :src="homeurl" />
				<h3>首页</h3>
			</router-link>
		</li>
		<li>
			<router-link to="/text">
				<img :src="orderurl"/>
				<h3>订单</h3>
			</router-link>
		</li>
		<li>
			<router-link to="/user">
				<img :src="userurl" />
				<h3>个人中心</h3>
			</router-link>
		</li>
	</ul>
		
</template>

<script>
export default{
	name : 'Bottom',
	props:['propsurl'],
	data(){
		return{
			homeurl : '',
			orderurl : '',
			userurl : '',
		}
	},
	mounted(){
		this.homeurl = this.propsurl[0];
		this.orderurl = this.propsurl[1];
		this.userurl = this.propsurl[2];
	}
}
</script>

<style scoped>
a{
	text-decoration: none;
	color: black;
}
.botton{
	position: fixed;
	bottom: 0rem;
	left: 0;
	width: 100%;
	background-color: white;
	height: 1.5rem;
	z-index: 100;
	display: flex;
	align-items: center;
	justify-content: space-between;
	text-align: center;
}
.botton li{
	width: 30%;
	text-align: center;
	height: 1rem;
}
.botton li img{
	width: 0.6rem;
	height: 0.6rem;
}
.botton li h3{
	line-height: 0.5rem;
}
</style>
